<template>
  <el-form inline class="flex items-center gap-x-4">
    <el-button type="primary" @click="emit('create')">新建分组</el-button>
    <!-- <el-button
      plain
      class="ml-0"
      :disabled="!isSelect"
      type="primary"
      @click="emit('batch-delete')"
      >批量删除</el-button
    > -->

    <el-form-item class="m-0">
      <el-input
        v-model="searchKeyword"
        :placeholder="placeholder"
        class="w-[360px] search-input"
        clearable
      >
        <template #prepend>
          <el-select
            v-model="activeSearchType"
            placeholder="请选择"
            class="w-[100px]"
          >
            <el-option
              v-for="item in searchTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
      <!-- <el-autocomplete
        ref="autocompleteRef"
        v-model="keyword"
        placeholder="请输入"
        class=" w-[360px]"
        clearable
        :fetch-suggestions="keywordFetchSuggestions"
        @change="handleSearch"
        @select="handleSearch"
      >
        <template #prepend>
          <el-select
            v-model="searchType"
            placeholder="请选择"
            class="w-[100px]"
          >
            <el-option label="分组名称" value="name"></el-option>
            <el-option label="备注" value="remark"></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-autocomplete> -->
    </el-form-item>
    <el-form-item class="m-0">
      <BasicRefreshBtn :loading="loading" @click="emit('refresh')" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

import type { IGroupListQuery } from '../types'

interface IProps {
  loading: boolean
  isSelect: boolean
}

interface IEmit {
  (event: 'create'): void
  (event: 'batch-delete'): void
  (event: 'refresh'): void
  (event: 'update:modelValue', value: Record<string, any>): void
  (event: 'search', value: IGroupListQuery): void
}

const emit = defineEmits<IEmit>()
withDefaults(defineProps<IProps>(), {})

const queryParams = reactive<IGroupListQuery>({
  name: '',
  remark: ''
})

/**
 * 搜索类型
 */
const searchTypeOptions = [
  { label: '分组名称', value: 'name' },
  { label: '备注', value: 'remark' }
]

const { activeSearchType, searchKeyword, placeholder } = useMultipartSearch(
  searchTypeOptions,
  queryParams
)

const handleSearch = () => {
  emit('search', queryParams)
}

// const autocompleteRef = ref()
// const keywordFetchSuggestions = (query: string, cb) => {
//   if (!query) {
//     cb([])
//     autocompleteRef.value?.close()
//     return
//   }
//   const queryKey = searchType.value
//   userGroupListApi({
//     [queryKey]: query,
//     offset: 0,
//     limit: 0
//   }).then(res => {
//     const list = (res.list ?? []).map(item => ({
//       label: item[queryKey],
//       value: item[queryKey]
//     }))

//     cb(unionBy(list, 'value'))
//   })
// }

watch(
  queryParams,
  val => {
    emit('update:modelValue', val)
  },
  { immediate: true }
)
</script>

<style scoped></style>
